<template>
    <div class="center">
        <div class="search">
            <!-- 报告主题查询 -->
            <div class="box">
                <div class="label">报告主题：</div>
                <div class="tags">
                    <div class="tag" :class="[activeThemeIndex == index ? 'act' : 'def']"
                        v-for="(item, index) in themeList" @click="changeTheme(index)" :key="index">{{ item.templateName
                        }}</div>
                </div>
            </div>
            <!-- 区域查询 -->
            <div class="box box-area">
                <div class="label">区域：</div>
                <div class="tags">
                    <div class="tag" :class="[activeAreaIndex == index ? 'act' : 'def']"
                        v-for="(item, index) in areaList" :key="index" @click="changeArea(index)">
                        {{ item.name }}</div>
                </div>
            </div>
        </div>
        <!-- 报告列表 -->
        <div class="list">
            <div class="item" v-for="(item, index) in list" :key="index">
                <div class="title">{{ item.reportDocName }}</div>
                <div class="line"></div>
                <div class="down-btn" @click="downloadReport(item)">
                    <img src="@/assets/images/download.svg" class="down-icon">
                    <div>下载文件</div>
                </div>
            </div>
        </div>
        <div class="pag">
            <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
                :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="sizeChange" @current-change="currentChange" />
        </div>
    </div>
</template>

<script setup lang="js">
import { selectThemeList, selectAreaList, selectReportList } from "@/api/center/report"
import { ref, onMounted } from "vue"

// 主题列表
const themeList = ref([])

// 当前选中主题索引
const activeThemeIndex = ref(0)

// 区域列表
const areaList = ref([])

// 当前选中区域索引
const activeAreaIndex = ref(0)

// 报告列表
const list = ref([])

// 分页
const total = ref(0)
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10
})

onMounted(() => {
    initThemeList()
})

// 初始化主题列表
const initThemeList = async () => {
    const res = await selectThemeList()
    if (res.data.length != 0) {
        themeList.value = res.data
        initAreaList(themeList.value[activeThemeIndex.value].id)
    }
}

// 初始化区域列表
const initAreaList = async (id) => {
    const res = await selectAreaList({ reportTemplateId: id })
    if (res.data.length != 0) {
        areaList.value = res.data
        pageInfo.value.pageNum = 1
        initReportList()
    }
}

// 切换主题
const changeTheme = (index) => {
    activeThemeIndex.value = index
    activeAreaIndex.value = 0
    initThemeList()
}

// 切换区域
const changeArea = (index) => {
    activeAreaIndex.value = index
    pageInfo.value.pageNum = 1
    initReportList()
}

// 初始化报告列表
const initReportList = async () => {
    const params = {
        ...pageInfo.value,
        reportTemplateId: themeList.value[activeThemeIndex.value].id,
        reportAreaCode: areaList.value[activeAreaIndex.value].districtId
    }
    const res = await selectReportList(params)
    list.value = res.rows
    total.value = Number(res.total)
}

// 切换页数
const sizeChange = (val) => {
    pageInfo.value.pageNum = val
    initReportList()
}

// 切换页码
const currentChange = (val) => {
    pageInfo.value.pageSize = val
    initReportList()
}

// 下载报告文件
const downloadReport = (item) => {
    window.location.href = item.reportDocPath
}
</script>
<style scoped lang="scss">
.center {
    background: linear-gradient(180deg, rgba(24, 56, 68, 0.29) 0%, rgba(0, 0, 0, 0) 100%);
    border-radius: vw(4);
    border: 1px solid #113C4B;

    .search {
        padding-left: vw(19);
        padding-right: vw(38);
        margin-top: vh(30);


        .box {
            padding-bottom: vh(24);
            border-bottom: 1px solid #173743;

            .tags {
                display: flex;
                flex-wrap: wrap;
                margin-top: vh(15);
            }

            .tag {
                cursor: pointer;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: vw(12);
                color: #FFFFFF;
                margin-right: vw(8);
                padding: vh(8) vw(36);
            }

            .label {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: vw(18);
                color: #FFFFFF;
            }

            .act {
                background: #124457;
                border-radius: vw(4);
            }

            .def {
                background: #0C2430;
                border-radius: vw(4);
            }
        }

        .box-area {
            margin-top: vh(20);
            margin-bottom: vh(25);
        }

    }

    .list {
        display: flex;
        flex-wrap: wrap;

        .item {
            width: vw(180);
            background: rgba(24, 56, 68, 0.35);
            border-radius: vw(8);
            margin-left: vw(20);
            margin-bottom: vh(16);
            padding-left: vw(16);
            padding-right: vw(7);
            padding-bottom: vh(18);

            .title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: vw(16);
                color: #FFFFFF;
                margin-top: vh(23);
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .line {
                margin-top: vh(20);
                margin-bottom: vh(13);
                height: 1px;
                background: linear-gradient(116deg, #457B80 0%, rgba(69, 105, 121, 0) 100%);
            }

            .down-btn {
                width: vw(106);
                height: vh(32);
                background: #0C3447;
                border-radius: vw(4);
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: vw(12);
                color: #FFFFFF;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;

                .down-icon {
                    width: vw(10);
                    margin-right: vw(10);
                }
            }
        }

    }

    .pag {
        display: flex;
        justify-content: flex-end;
        margin-top: vh(20);

        :deep(.el-pagination__total) {
            color: #fff;
        }

        :deep(.el-pagination button) {
            background-color: #183844;
            color: #fff;
        }

        :deep(.el-input__wrapper) {
            background: #183844;
        }

        :deep(.el-input__inner) {
            color: #fff;
        }

        :deep(.el-pagination__goto) {
            color: #ffffff;
        }

        :deep(.el-pagination__classifier) {
            color: #ffffff;
        }

        :deep(.el-pager li) {
            background-color: #183844;
            color: #ffffff;
        }

        :deep(.el-pager li.is-active) {
            background-color: #B3DD4D;
            color: #000000;
        }
    }
}
</style>